<template>
  <el-drawer v-model="visible" direction="rtl" size="45%" @close="close" custom-class="contract-drawer" close-on-click-modal close-on-press-escape>
    <div class="drawer-header">
      <div class="header-left">
        <el-avatar icon="el-icon-document" size="medium" class="contract-icon"></el-avatar>
        <div class="contract-info">
          <span class="contract-no">{{ form.contractNo }}</span>
          <el-tag size="small" type="success">已确认</el-tag>
        </div>
      </div>
      <div class="header-actions">
        <el-button type="text" icon="el-icon-edit">编辑</el-button>
        <el-button type="text" icon="el-icon-share">移交</el-button>
        <el-button type="text" icon="el-icon-user">更改协同人</el-button>
        <el-button type="text" icon="el-icon-more"></el-button>
        <el-button type="text" icon="el-icon-close" @click="handleClose"></el-button>
      </div>
    </div>

    <div class="drawer-content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="详细资料" name="details">
          <!-- Basic Information -->
          <div class="info-section">
            <div class="section-title">基本信息</div>
            <div class="info-grid">
              <div class="info-item">
                <label>合同类型</label>
                <span>{{ form.contractTypeName }}</span>
              </div>
              <div class="info-item">
                <label>合同名称</label>
                <span>{{ form.contractName }}</span>
              </div>
              <div class="info-item">
                <label>合同编号</label>
                <span>{{ form.contractNumber }}</span>
              </div>
              <div class="info-item">
                <label>跟单来源</label>
                <span>{{ form.contractName }}</span>
              </div>
              <div class="info-item">
                <label>关联客户</label>
                <span>{{ form.supplierName }}</span>
              </div>
              <div class="info-item">
                <label>关联商机</label>
                <span>{{ form.clueNumber }}</span>
              </div>
              <div class="info-item">
                <label>合同开始日期</label>
                <span>{{ form.beginDate }}</span>
              </div>
              <div class="info-item">
                <label>合同结束日期</label>
                <span>{{ form.endDate }}</span>
              </div>
              <div class="info-item">
                <label>签订人</label>
                <span>{{ form.signUserName || '-' }}</span>
              </div>
              <div class="info-item">
                <label>协同人</label>
                <span>{{ form.coordinationUserName || '-' }}</span>
              </div>
              <div class="info-item">
                <label>开票方式</label>
                <span>{{ form.invoicingMethodName || '-' }}</span>
              </div>
              <div class="info-item">
                <label>付款方式</label>
                <span>{{ form.paymentMethod || '-' }}</span>
              </div>
              <div class="info-item">
                <label>所属区域</label>
                <span>{{ form.saleAreaName || '-' }}</span>
              </div>
            </div>
          </div>

          <!-- Sales Information -->
          <div class="info-section">
            <div class="section-title">销售信息</div>
            <div class="info-grid">
              <div class="info-item">
                <label>合同金额</label>
                <span>{{ form.amount }}</span>
              </div>
            </div>
          </div>

          <!-- Extended Information -->
          <div class="info-section">
            <div class="section-title">扩展信息</div>
            <div class="info-grid">
              <div class="info-item">
                <label>附件</label>
                <span v-if="getUrls().length">
                  <el-link v-for="(item,index) in getUrls()" :key="index" :href="item" target="_blank">{{ item }}</el-link>
                </span>
                <span v-else>-</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="关联产品" name="products">
          <el-table :data="form.jzgContractDetailVoList" style="width: 100%" scrollbar-always-on>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column label="商品图片" align="center" min-width="120">
              <template #default="scope">
                <ImagePreview :width="100" :height="100" :src="scope.row.goodsPackImg" :preview-src-list="[scope.row.goodsPackImg]" />
              </template>
            </el-table-column>
            <el-table-column label="商品名称" align="left" prop="goodsName" min-width="200" />
            <el-table-column label="商品品牌" align="center" prop="brandName" />
            <el-table-column label="商品数量" align="left" prop="goodsNumber" width="180"/>
            <el-table-column label="商品价格" align="left" prop="goodsPrice" />
            <el-table-column label="金额" align="center" prop="goodsAmount" />
            <el-table-column label="计价方式">
              <template #default="scope">
                {{ selectDictLabel(goods_price_type, scope.row.goodsPriceTypeDictValue) }}
              </template>
            </el-table-column>
            <el-table-column label="开始日期" align="center" prop="beginDate" min-width="180"/>

            <el-table-column label="周期" align="center" prop="periodicNum" width="120"/>
            <el-table-column label="到期日期" align="center" prop="endDate" min-width="180"/>
            <el-table-column prop="comment" label="备注"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>
  
  <script>
import modelMixin from '@/mixins/modelMixin';
import contract from '@/api/goods/contract';

import { getSupplier } from '@/api/goods/supplier/index';
export default {
  name: 'ContractDrawer',
  props: {
    contractId: {
      type: String,
      default: ''
    }
  },
  mixins: [modelMixin],
  data() {
    return {
      activeTab: 'details',
      funcObj: contract,
      visible: false,
      form: {}
    };
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    detail(row) {
      this.visible = true;
      this.getDetail(row);
        getSupplier(row.supplierId).then((res) => {
        this.form.saleAreaName = res.data.saleAreaName;

      })
    },
    getUrls() {
      let urls = (this.form.annex || '').split(',');
      return urls;
    },
    close() {
      this.visible = false;
    },
  }
};
</script>
  
  <style>
.contract-drawer {
  background: #f5f7fa;
}

.drawer-header {
  padding: 16px 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e4e7ed;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contract-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contract-no {
  font-size: 16px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.drawer-content {
  padding: 20px;
}

.info-section {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item label {
  font-size: 14px;
  color: #909399;
}

.info-item span {
  font-size: 14px;
  color: #303133;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Element UI Overrides */
.el-drawer__header {
  display: none;
}

.el-tabs__nav-wrap::after {
  height: 1px;
}

.el-tabs__item {
  font-size: 14px;
}

.el-tabs__item.is-active {
  color: #2468f2;
}

.el-tabs__active-bar {
  background-color: #2468f2;
}
</style>